<template>
  <div>
    <vxe-modal
      :title="$t('common.title.setting', '设置')"
      v-model="show"
      :loading="loading"
      :mask="false"
      :lock-view="false"
      width="60vw"
      height="480px"
      destroy-on-close
      show-zoom
      remember
      resize
      show-footer
      show-confirm-button
      show-cancel-button
      @confirm="confirmHandle"
    >
      <el-form ref="refForm" :model="formData" label-width="120px">
        <el-form-item label="选择路径" prop="pid">
          <el-tree-select
            v-model="formData.pid"
            :data="namespaceTree"
            :props="{ label: 'key', value: 'id' }"
            :check-strictly="true"
            placeholder="请选择合适的路径"
            clearable
          />
        </el-form-item>
        <el-form-item label="空间" prop="segment">
          <el-input
            v-model="formData.segment"
            :placeholder="$p('menu.admin.i18n.field.segment', '空间名称')"
          />
        </el-form-item>
      </el-form>
    </vxe-modal>
  </div>
</template>

<script setup>
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

defineOptions({
  name: 'I18nEdit',
  inheritAttrs: false,
});

const props = defineProps({
  api: {
    type: Object,
    required: true,
    validator: (value) => {
      return typeof value.add === 'function';
    },
  },
  options: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['reload']);

// 是否显示载入效果
const loading = ref(false);
// 是否显示
const show = ref(false);
// 命名空间树
const namespaceTree = ref([]);
// 表单数据
const formData = ref({
  key: '',
  segment: '',
});

// 初始化表单数据
const initFormData = () => {
  Object.assign(formData.value, {
    pid: null,
    segment: '',
  });
};

const confirmHandle = async () => {
  await props.api.add(formData.value);
  emit('reload');
};

/**
 * 暴露方法
 */
defineExpose({
  show() {
    props.api.getNameSpace().then(({ data }) => {
      namespaceTree.value = data;
    });
    // 先显示模态框
    show.value = true;
    // 初始化表单数据
    initFormData();
  },
});
</script>

<style lang="scss" scoped>
.desc-label-width {
  width: 100px;
}

.content-text {
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

// 加载状态样式
:deep(.el-loading-mask) {
  border-radius: 4px;
}
</style>
